<template>
<view>	  <u-navbar :is-back="false" title="商品入库记录"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
 
	
	

	
  <div
    class="app-draw-record">
    <div class="draw-head">
      <u-button type="primary"
        size="medium"
        @click="handleUrlAdd">
        新增入库</u-button>
      <u-input class="u-left"
        v-model="search"
        :border="true" />
    </div>
    <u-empty text="暂无数据"
      mode="list"
      v-if="!clist.length">
    </u-empty>
    <div class="draw-content"
      v-for="(item,index) in clist"
      :key="index">
      <div
        class="date u-flex u-between">
        <span>{{item.fUpdateTime}}</span>
        <u-button size="mini"
          type="success"
          style="margin:0"
          @click="$api.navigator(`./Detail?id=${item.fId}&date=${item.fUpdateTime}`)">
          查看
        </u-button>
      </div>
      <appProduct
        v-for="(v,i) in item.ProList"
        :key="i" :li="v">
      </appProduct>
      <u-empty text="暂无数据"
        mode="list"
        v-if=" !item.ProList.length">
      </u-empty>
    </div>
  </div>
</view>	</template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      page: 1,
      isAllList: true,
      date: '',
      search: '',
      clist: []
    }
  },
  onLoad() {
    let state = this.routeOption().options.state
    if (state == 1) {
      uni.setNavigationBarTitle({
        title: '领取记录列表'
      })
    } else {
      uni.setNavigationBarTitle({
        title: '商品入库记录'
      })
    }
  },
  onShow() {
    this.date = new Date().toLocaleDateString().replace(/\//g, '-')
    this.defaultData(() => {
      this.getclist()
    })
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getclist()
  },
  methods: {
    defaultData(cb) {
      this.page = 1
      this.clist = []
      this.isAllList = true
      cb && cb()
    },
    getclist() {
      let info = { InOut: 2, Type: 1, Status: 0, Key: this.search }
      this.$axios('api/ProInAndOut/ListPaged', 'post', { PageIndex: this.page, value: info }).then(res => {
        if (!res.Value.List.length) {
          return (this.isAllList = false)
        }
        res.Value.List.forEach(x => {
          x.ProList = x.ProList.map(v => ({
            avatar: this.$api.OrderImg(v.fProId),
            gname: v.fProName,
            id: v.fProId,
            details: [
			  { label: '单位', value: v.fUnit },
              { label: '入库数量', value: v.fCount },
              { label: '到期时间', value: v.fOverTime }
            ]
          }))
        })
        this.clist.push(...res.Value.List)
      })
    },
    handleUrlAdd() {
      uni.navigateTo({
        url: '/pages/stock/ProIn/AddDetail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  u-button,
  u-input {
    width: 45%;
  }
}
.draw-content {
  .date {
    padding-top: 32rpx;
    span + span {
      margin-left: 10rpx;
    }
  }
  padding: 0 20rpx;
}
.text-red {
  color: red;
}
.text-blue {
  color: blue;
}
</style>